<template>
    <div class="hospital">
        <!-- 头部 -->
        <div class="ball" style="color:#fff;height:150px; background-image:url(http://121.199.29.84/visual/static/img/bg1.efce26ef.png); background-size:cover; margin:-5px; padding:15px;margin-bottom:15px;">
            <div class="title" style="line-height:40px;font-size:20px;front-weight:700;">上海市</div>
            <div class="title" style="line-height:40px;font-size:20px;front-weight:700;">医疗救治定点医院和发热门诊一览</div>
        </div>
        
        
        
        <!-- 医院展示面 -->
        <div style="height:50px;margin-top:150px;">
            <div style="height:33px;width:186px;position:relative;">
                <input v-model="params.name" type="text" style="height:32px;line-height:32px;padding-left:30px;border-radius:5px;" placeholder="请输入关键字">
                <span style="height:100%;width:30px;position:absolute;left:0;">
                    <img src="./放大镜.svg" style="width:100%;height:100%;">
                </span>
            </div>
            <div class="search">搜索</div>
        </div>
        

        <div class="list" style="padding-top:10px;">
        
            
            <el-row v-for='item in tableData' :key="item.id">
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <div class="left">
                            <div>{{item.name}}</div>
                            <div>
                                <el-tag>{{item.flags}}</el-tag>
                            </div>
                            <div class="left_three">{{item.province}}{{item.city}}{{item.area}}</div>
                        </div>
                        <div class="right">
                            <div><i class="iconfont icon-map"></i></div>
                            <div style="color:#2cb5ac;">2113.5km</div>
                        </div>
                    </div>
                </el-col>
            </el-row>

        <!-- 分页
        <el-pagination
            background
            layout="prev, pager, next"
            :total=total
            :page-size='params.pageSize'
            @current-change='pageChange'>
        </el-pagination> -->


        </div>
    </div>
</template>

<style scoped>
    .search {
        position: absolute;
        left: 14%;
        top:157px;
        color: #fff;
        background-color: #2cb5ac;
        border-color: #2cb5ac;
        border-radius: 3px;
        width: 50px;
        height: 38px;
        line-height: 38px;
        text-align: center;
    }
    .left {
        float: left;
        height: 90px;
    }
    .left div{
        line-height: 30px;
    }
    .right {
        float: right;
        height: 90px;
    }
    .right div{
        line-height: 45px;
    }
    .ball {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
    }
    .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #ededed;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 90px;
        padding:0 10px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .left_three {
        color: #999;
        font-size: 14px;
        line-height: 2em;
    }
    .iconfont{
        font-size: 26px;
        line-height: 2em;
        color: #0074ff;
    }
</style>

<script>
import axios from '@/http/axios'
export default {
    data(){
        return{
            tableData:[],
            total:0,
            params:{
                page:1,
                pageSize:10
            }
        }
    },
    created(){
        this.queryPage();
    },
    // 监听
    watch:{
        params:{
            handler:function(){
                this.queryPage()
            },
            deep:true
        }
    },
    methods:{
        // 页码改变
        pageChange(page){
            console.log(page);
            this.params.page = page;
        },

        // 查询
        queryPage(){
            axios({
                url:'http://121.199.29.84:8001/hospital/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                this.total = res.data.data.total;
                // console.log(res);
                this.tableData = res.data.data.list;
                // console.log(res.data.data.list);
            })
        }
    }
}
</script>